<template>
  <RouterView />
  <van-Tabbar v-model="active" class="van-tabbar">
    <van-TabbarItem name="home" icon="home-o">首页</van-TabbarItem>
    <van-TabbarItem name="fa'xain" icon="comment-o" dot>发现</van-TabbarItem>
    <van-TabbarItem name="shopping" icon="browsing-history-o">订单</van-TabbarItem>
    <van-TabbarItem name="me" icon="contact">我的</van-TabbarItem>
  </van-Tabbar>
</template>

<script setup lang="ts">
import {ref,watch} from 'vue';
import {RouterView,useRouter,useRoute} from "vue-router";


//获取路由器
const route=useRoute();
//获取路由
const router=useRouter();
//记录当前选择的变量
const active=ref(route.name)

watch(active,(nowValue)=>{
  router.push({
    // 编程式导航
    name:nowValue
  })
})
</script>

<style scoped>
.van-tabbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1000; /* 确保底部栏在最上层 */
  background-color: rgb(244, 244, 244); /* 背景颜色 */
}
</style>